<script setup>
import { ref } from "vue";
import tips from "../../components/index/tips.vue";
import twoButton from "../../components/index/twoButton.vue";
import { httpRequest } from "../../utils/http";
import aipCheckbox from "../../components/index/aip-checkbox.vue";
const content = ref(
  "为了视频内容推送的准确性，建议添加与视频内容相关的标题描述，数量不少于3条"
);
const shopInfo = ref("");
const cusTitle = ref("");
const title = ref([]);
const cusCheckAll = ref(false);
const isRefer = ref(false);
if (uni.getStorageSync("title")) title.value = uni.getStorageSync("title");
const index = ref(uni.getStorageSync("index"));
shopInfo.value = uni.getStorageSync("shop")[index.value];
const titleList = ref([]);
const isCus = ref(false);
const isEdit = ref(false);
const id = ref("");
//获取推荐标题
const referList = ref([]);
const getTitleRed = async () => {
  const res = await httpRequest("/api/titleRad", "POST", {
    shopCate2Id: shopInfo.value.shopCate2Obj.shopCate2Id,
  });
  titleList.value = res.data;
  titleList.value.map((e) => {
    e.checked = false;
  });
  referList.value = titleList.value.filter((e, i) => {
    return i < 3;
  });
};
const titleDiy = ref([]);
//获取自定义标题
const getTitle = async () => {
  const res = await httpRequest("/api/getDiyTitle", "POST", {
    shopId: shopInfo.value.shopId,
  });
  titleDiy.value = res.data;
  titleDiy.value.map((e) => {
    e.checked = false;
  });
};
getTitle();
getTitleRed();

//参考
const refer = () => {
  isRefer.value = true;
};
const red = ref(null);
const diy = ref(null);
const redTitle = () => {
  isCus.value = false;
  red.value.open("bottom");
};
const indTitle = () => {
  isCus.value = true;
  diy.value.open("bottom");
};

//选中
const keys = ref(0);
const isAll = ref(false);
const check = (item, i) => {
  item.checked = !item.checked;
  keys.value = keys.value == 1 ? 0 : 1;
  if (!isCus.value) {
    isAll.value = titleList.value.every((e) => e.checked === true);
    titleL.value = titleList.value.filter((e) => e.checked == true);
  } else {
    cusCheckAll.value = titleDiy.value.every((e) => e.checked === true);
    titleD.value = titleDiy.value.filter((e) => e.checked == true);
  }
  title.value = [...titleL.value, ...titleD.value];
  uni.setStorageSync("title", title.value);
};
const titleL = ref([]);
const titleD = ref([]);
//全选
const checkAll = () => {
  if (!isCus.value) {
    if (isAll.value) {
      titleList.value.forEach((e) => {
        e.checked = false;
      });
    } else {
      titleList.value.forEach((e) => {
        e.checked = true;
      });
    }
    isAll.value = !isAll.value;
    titleL.value = titleList.value.filter((e) => e.checked == true);
  } else {
    if (cusCheckAll.value) {
      titleDiy.value.forEach((e) => {
        e.checked = false;
      });
    } else {
      titleDiy.value.forEach((e) => {
        e.checked = true;
      });
    }
    cusCheckAll.value = !cusCheckAll.value;
    titleD.value = titleDiy.value.filter((e) => e.checked == true);
  }
  title.value = [...titleL.value, ...titleD.value];

  uni.setStorageSync("title", title.value);
};

//确认
const verify = () => {
  red.value.close();
  diy.value.close();
};
//添加按钮
const add = ref(null);
const addTitle = () => {
  isEdit.value = false;
  diy.value.close();
  add.value.open("bottom");
};

const border = ref(-1);
//点击写入输入框
const getInput = (i) => {
  border.value = i;
  cusTitle.value = referList.value[i].titleName;
};
//确定添加
const addOk = async () => {
  console.log(isEdit.value);
  if (isEdit.value) {
    console.log(id.value);
    const res = await uni.request({
      url: "https://www.diandianyouke.cn:8081/api/editDiyTitle",
      data: {
        id: id.value,
        titleName: cusTitle.value,
        shopId: shopInfo.value.shopId,
      },
      header: {
        "Content-Type": "application/json",
      },
      method: "POST",
    });
    getTitle();
    add.value.close();
    diy.value.open();
  } else {
    if (!cusTitle.value) return;
    const res = await httpRequest("/api/addDiyTitle", "POST", {
      titleName: cusTitle.value,
      shopId: shopInfo.value.shopId,
    });
    getTitle();
    add.value.close();
    diy.value.open();
  }
};
const delCusTitle = async (id) => {
  const res = await httpRequest("/api/delDiyTitle", "POST", { id });
  getTitle();
};

const editCusTitle = async (i, index) => {
  console.log(i, index);
  isEdit.value = true;
  id.value = i;
  add.value.open("bottom");
  cusTitle.value = titleDiy.value[index].titleName;
};

const delTitle = (i) => {
  title.value.splice(i, 1);
  uni.setStorageSync("title", title.value);
};

//关闭弹窗
const close = () => {
  red.value.close();
  diy.value.close();
  add.value.close();
};
</script>

<template>
  <view class="page">
    <tips :message="'标题'" :content="content"></tips>
    <view class="kong" v-if="title.length == 0">
      <image
        class="img"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/state_empty.png"
      />
    </view>
    <view v-else class="betitle" v-for="(item, index) in title" :key="item.titleId">
      <view class="circle">{{ index + 1 }}</view>
      <view style="width: 486rpx">{{ item.titleName }}</view>
      <image
        @click="delTitle(index)"
        style="width: 48rpx; height: 48rpx"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_shanchu.png"
        mode=""
      />
    </view>
    <two-button
      @leftClick="redTitle"
      @rightClick="indTitle"
      :left="'选择推荐标题'"
      :right="'添加个性标题'"
    />
  </view>
  <uni-popup ref="red">
    <view class="popup">
      <view class="close">
        <image
          class="close-btn"
          @click="close"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        推荐标题
      </view>
      <view class="popup-content">
        <view class="title-item" v-for="(item, index) in titleList" :key="index">
          <view @click="check(item, index)">
            <aip-checkbox :key="keys" :check="item.checked"></aip-checkbox>
          </view>
          <view class="content-item">{{ item.titleName }}</view>
        </view>
      </view>
      <view class="bottom-btn">
        <view class="all" @click="checkAll">
          <aip-checkbox :key="keys" :check="isAll"></aip-checkbox>
          全选</view
        >
        <button class="verify" @click="verify">
          确认选择{{ titleL.length ? `(${titleL.length})` : "" }}
        </button>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="diy">
    <view class="popup">
      <view class="close">
        <image
          class="close-btn"
          @click="close"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        个性标题
        <text @click="addTitle" class="addbtn">添加新标题</text>
      </view>
      <view class="kong" style="height: 905rpx" v-if="titleDiy.length == 0">
        <image
          class="img"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/state_empty.png"
        />
        暂无内容
      </view>
      <view v-else class="cus-middle">
        <view
          class="cus-item"
          @click="check(item, index)"
          v-for="(item, index) in titleDiy"
          :key="item.id"
        >
          <aip-checkbox :key="keys" :check="item.checked"></aip-checkbox>
          <view class="cus-content">
            <view>{{ item.titleName }}</view>
            <view class="cus-image">
              <image
                @click="editCusTitle(item.id, index)"
                style="width: 48rpx; height: 48rpx; margin-right: 24rpx"
                src=""
                mode=""
              />
              <image
                @click="delCusTitle(item.id)"
                style="width: 48rpx; height: 48rpx"
                src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_shanchu.png"
                mode=""
              />
            </view>
          </view>
        </view>
      </view>
      <view class="bottom-btn">
        <view class="all" @click="checkAll">
          <aip-checkbox :key="keys" :check="cusCheckAll"></aip-checkbox>
          全选</view
        >
        <button class="verify" @click="verify">确认选择</button>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="add">
    <view class="popup">
      <view class="close">
        <image
          class="close-btn"
          @click="close"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        {{ isEdit ? "修改" : "添加" }}个性标题
        <text @click="addOk" class="addbtn" :class="!cusTitle ? 'disable' : ''"
          >确定{{ isEdit ? "修改" : "添加" }}</text
        >
      </view>
      <view style="height: 1072rpx; padding: 30rpx; box-sizing: border-box">
        <textarea
          v-model="cusTitle"
          class="textarea"
          placeholder-style="color:rgb(144,147,153)"
          placeholder="请输入标题"
        />
        <view v-if="!isRefer" class="ignorant"
          >不知道写什么?<text @click="refer" style="color: rgb(142, 84, 244)"
            >参考AI标题</text
          ></view
        >
        <view v-else class="refer">
          <view class="tip">
            <text>点击话题列表，自动写入输入框</text>
            <view @click="getTitleRed" class="change">
              <image style="width: 32rpx; height: 32rpx" src="" mode="" />换一批
            </view>
          </view>
          <view>
            <view
              @click="getInput(index)"
              v-for="(item, index) in referList"
              :key="item.titleId"
              class="box-item"
              :class="border == index ? 'checked' : ''"
              >{{ item.titleName }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: rgb(246, 248, 251);
  padding-bottom: 200rpx;
  overflow-y: scroll;
  .kong {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;

    height: 100%;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
    font-size: 24rpx;
    color: rgb(144, 147, 153);
    .img {
      width: 610rpx;
      height: 368rpx;
      margin-top: 132rpx;
      margin-bottom: 42rpx;
    }
  }

  .betitle {
    box-sizing: border-box;
    width: 690rpx;
    min-height: 142rpx;
    background-color: #fff;
    border-radius: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    font-size: 28rpx;
    color: rgb(69, 70, 74);
    margin-bottom: 24rpx;
    .circle {
      width: 48rpx;
      height: 48rpx;
      border-radius: 356rpx;
      background-color: rgb(197, 163, 255);
      text-align: center;
      line-height: 48rpx;
      color: #fff;
    }
  }
}
.popup {
  width: 100%;
  background-color: #fff;
  border-radius: 32rpx 32rpx 0 0;
  .kong {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
    font-size: 24rpx;
    color: rgb(144, 147, 153);
    .img {
      width: 610rpx;
      height: 368rpx;
      margin-top: 132rpx;
      margin-bottom: 42rpx;
    }
  }
  .close {
    width: 100%;
    height: 108rpx;
    text-align: center;
    line-height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
    .close-btn {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
    }
    .addbtn {
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
      color: rgb(142, 84, 244);
    }
  }
  .textarea {
    box-sizing: border-box;
    width: 690rpx;
    height: 330rpx;
    border: 2rpx solid rgb(220, 223, 230);
    padding: 30rpx;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
  }
  .ignorant {
    font-size: 28rpx;
    text-align: right;
    color: rgb(69, 70, 74);
  }
  .refer {
    .tip {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;
      font-size: 24rpx;
      color: rgb(144, 147, 153);
      .change {
        color: rgb(142, 84, 244);
        font-size: 28rpx;
      }
    }
    .box-item {
      width: 690rpx;
      min-height: 142rpx;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      background-color: rgb(249, 249, 249);
      font-size: 28rpx;
      color: rgb(69, 70, 74);
      margin-bottom: 24rpx;
      border: 2rpx solid rgba(0, 0, 0, 0);
    }
  }
  .checked {
    border: 2rpx solid rgb(142, 84, 244) !important;
  }
  .popup-content {
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 0 30rpx;
    height: 905rpx;
    border-top: 2rpx solid rgb(220, 223, 230);
    border-bottom: 2rpx solid rgb(220, 223, 230);
    .title-item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 136rpx;
      border-radius: 16rpx;
      font-size: 28rpx;
      color: rgb(69, 70, 74);
      border-bottom: 2rpx solid rgb(220, 223, 230);
    }
  }
  .cus-middle {
    padding: 30rpx;
    box-sizing: border-box;
    height: 905rpx;
    .cus-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .cus-content {
        width: 618rpx;
        min-height: 214rpx;
        background-color: rgb(249, 249, 249);
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 16rpx;
        .cus-image {
          text-align: right;
          margin-top: 24rpx;
        }
      }
    }
  }
  .bottom-btn {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 166rpx;
    padding: 10rpx 30rpx 0;
    .all {
      display: flex;
      align-items: center;
      height: 88rpx;
      font-size: 28rpx;
      color: rgb(144, 147, 153);
    }
    .verify {
      width: 552rpx;
      height: 86rpx;
      padding: 0;
      margin: 0;
      text-align: center;
      line-height: 86rpx;
      color: #fff;
      background-color: rgb(142, 84, 244);
      font-size: 32rpx;
      margin-left: 18rpx;
    }
  }
}
.disable {
  color: rgb(144, 147, 153) !important;
}
</style>
